uniapp和nodejs的移动商城

您所在的位置：网站首页 › uniapp vue版本 › uniapp和nodejs的移动商城

uniapp和nodejs的移动商城

2023-02-09 10:07| 来源: 网络整理| 查看: 265

一：新建项目及相关准备

1.添加公共的css文件。

2.在iconfont网站找需要用的图标，引入。

这里会遇到图标不显示的问题，查了很多资料，发现这个文章有用uniapp引入iconfont_旭陌小生的博客-CSDN博客_uniapp 引入iconfont

二：顶部的开发

使用app-plus配置，里面的titleNView，配置顶部导航（以下是titleNView的配置项）

具体配置，利用浮动配置一左一右两个图片，text是阿里图标中的unicode码

三：轮播图组件

直接输入swiper就会快捷生成swiper，当图片添加进去后，需要设置图片宽度为100%。但是swiper组件中高度是默认的，所以swiper高度要与轮播图图片一致，才能完全显示。

顶部滑动

效果是随着顶部的点击，下面也显示出对应的内容

首先渲染数据

此时还无法实现滚动，需要给父元素设定宽高，并不允许换行，子元素转换成行内块元素

选定谁谁高亮效果

首先定义一个索引，如果索引与当前的序号相同，则不变。如果不同，则改为选中的状态

下一步，实现顶部滑块的点击，使得下面内容随之改变

1.首先下面放一个swiper，里面写上每个滑块对应的内容

然后使用change事件，当curren改变时会调用change事件，此时我们把change绑定为上面滑块的index，当上面滑块index改变时就会触发下面的change事件。

当下面的内容滚动时，上面滑块也会跟着变化，但是不会动态变化，就是内容不会滑动。

给上面的滑块设定一个scroll-into-view，且设置id（id不能以数字开头）

当滑块变化时设置对应的index

此时上面的滑块就会跟着变化。

当我们将之前写好的组件放入swiper中时，会发现只显示了一小部分内容，原因是swiper有默认的高度。

解决办法：在onReady中获取节点的高度。

给swiper的高度赋值，即可显示完整。

搭建node

首先全局安装

npm install express-generator -g

接着进入app中安装

express --view=ejs server

然后根据提示安装

安装后启动后端（npm start），如图是成功的

在server文件夹下的router里写接口

写完重启服务器，即可访问到数据

前端访问后端的地址，在onLoad函数访问

但此时并没有输出，因为我们是本地测试，不是访问远程服务器的接口，所以需要

1：电脑手机同一个wifi。

2不能用localhost，改为ip

查找电脑的ip，将localhost替换。

此时我们也能得到数据a

可以成功请求到数据，所以我们将需要的数据写到这个路径下

然后将请求数据的方法封装

将原有的topBar删除，使用接口赋值

再定义一个新数据newTopBar来对应渲染不同的Tabbar

传递数据并渲染

但是最后却会有多个“猜你喜欢”

解决办法：使用template标签，把Card与另一个组件放一起，且Card必须放在下面，还有判断条件需放在template中

旧写法

正确写法

修改可视区高度问题

下面这种api已经无法获取高度，因为这个类里面有组件且有数据渲染

因此不用这个方法，使用scroll-view标签

用另一个api来测试可视区域的高，用可视区的高减去滑块高

写接口传数据

根据不同滑块显示不同数据

每次滑动数据添加一个判断

上拉加载更多

定义一个变量，初始值为‘上拉加载更多’，当触底后，调用函数

传入函数并判断执行

封装request

在request.js文件中对请求进行封装

export default{ common:{ baseUrl:'http://192.168.43.243:3000/api', data:{}, header:{ "Content-Type":"application/json", "Content-Type":"application/x-www-form-urlencoded", }, method:"GET", dataType:'json' }, request(options={}){ uni.showLoading({ title:'加载中' }) // console.log(1); options.url=this.common.baseUrl+options.url; options.data=options.data||this.common.data; options.header=options.header||this.common.header; options.method=options.method||this.common.method; options.dataType=options.dataType||this.common.dataType; return new Promise((res,rej)=>{ uni.request({ ...options, success: (result) => { if(result.statusCode!=200){ return rej() } let data=result.data.data; res(data) // 请求成功后取消加载中 setTimeout(function(){ uni.hideLoading(); },500); } }) }) } }

然后在组件中引入